<template>
  <div class="page-container">
    <div class="operators">
      <el-button
        type="primary"
        v-permission="['user:add']"
        @click="addUserDialog"
        size="medium"
        >新增</el-button
      >
      <el-button
        v-permission="['user:search']"
        type="primary"
        size="medium"
        @click="getUsersHandle"
        >查询</el-button
      >
    </div>
    <el-table
      :data="tableData"
      :height="tableHeight"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      align="center"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="userName" label="账号"> </el-table-column>
      <el-table-column align="center" :formatter="roleFormatter" label="角色">
      </el-table-column>
      <el-table-column align="center" prop="avatar" label="头像">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" class="column-avatar" />
        </template>
      </el-table-column>

      <el-table-column align="center" prop="remark" label="备注">
        <template slot-scope="scope">{{ scope.row.remark || "---" }}</template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="260" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-permission="['user:delete']"
            @click="deleteUserHandle(scope.row)"
            type="danger"
            size="small"
            >删除</el-button
          >
          <el-button
            v-permission="['user:update']"
            @click="editUserBtnHandle(scope.row)"
            type="primary"
            size="small"
            >编辑</el-button
          >
          <el-button
            v-permission="['user:update']"
            @click="editAuthorityHandle(scope.row)"
            type="primary"
            size="small"
            >权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <Edit
      title="用户"
      v-if="userVisible"
      :dialogVisible="userVisible"
      :formData="form"
      @closeDialog="closeDialog"
    />

    <Authority
      title="权限"
      v-if="authorityVisible"
      :dialogVisible="authorityVisible"
      :formData="form"
      @closeDialog="closeDialog"
    />
  </div>
</template>

<script>
import { getUsers, deleteUser } from "@/api/sys/user";
import Authority from "./authority.vue";
import Edit from "./edit.vue";
import { autoTableHeight } from "@/utils/tools";
export default {
  data() {
    return {
      form: {
        id: "",
        userName: "",
        password: "",
        avatar: "",
        remark: "",
      },
      userVisible: false,
      tableData: [],
      currentUserId: "",

      imageUrl: "",
      file: "",

      authorityVisible: false,
    };
  },
  components: {
    Edit,
    Authority,
  },
  created() {
    autoTableHeight(220, (e) => {
      this.tableHeight = e;
    });
    this.getUsersHandle();
  },
  methods: {
    roleFormatter(row, column, cellValue) {
      return row.roles.map((item) => item.name).join(",") || "- - - ";
    },
    // 用户编辑
    addUserDialog() {
      this.userVisible = true;
    },
    editUserBtnHandle(row) {
      this.form = row;
      this.imageUrl = row.avatar;
      this.userVisible = true;
    },
    deleteUserHandle(user) {
      if (user.userName === "admin") {
        this.$message({
          type: "warming",
          message: "超级管理员帐号禁止删除！",
        });
        return;
      }
      this.$confirm(`此操作将永久删除该用户, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteUser({
            id: user.id,
          }).then((res) => {
            this.getUsersHandle();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getUsersHandle() {
      getUsers().then((res) => {
        this.tableData = res.data;
      });
    },
    // 权限编辑
    editAuthorityHandle(user) {
      this.authorityVisible = true;
      this.form = JSON.parse(JSON.stringify(user));
    },
    closeDialog(type, isRefresh) {
      this[type] = false;
      this.form = {
        id: "",
        userName: "",
        password: "",
        avatar: "",
        remark: "",
      };
      isRefresh && this.getUsersHandle();
    },
  },
};
</script>

<style lang="scss" scoped>
.operators {
  margin-bottom: 16px;
}
.column-avatar {
  width: 60px;
  height: 60px;
}
.dialog-btns {
  text-align: center;
}
.el-upload .el-icon-delete {
  z-index: 6;
}
.el-upload:hover .el-icon-delete {
  z-index: 88 !important;
}
.img-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px !important;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
}
.el-upload--picture-card {
  width: 148px;
  height: 148px;
  line-height: 148px;
  position: relative;
  overflow: hidden;
}
.avatar {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: 10;
}
</style>
